<template>
  <div>
    <div class="top" @click="nxt">
      <div class="fanhui"><back></back></div>
      <span v-show="log1 < 24">四大金刚</span>
      <div class="labe3" v-show="log1 > 24">
        <span :class="{ hui: true, bai: res == 1 }" @click="res = 1">店铺</span>
        <span :class="{ hui: true, bai: res == 2 }" @click="res = 1">商品</span>
        <span :class="{ hui: true, bai: res == 3 }" @click="res = 3">案例</span>
      </div>
      <div class="sou" @click="nxt">搜</div>
    </div>
    <div class="zan"></div>
    <div class="labe">
      <div class="labe1">
        <span :class="{ di: res == 1 }" @click="res = 1">店铺</span>
        <span :class="{ di: res == 2 }" @click="res = 2">商品</span>
        <span :class="{ di: res == 3 }" @click="res = 3">案例</span>
      </div>
    </div>
    <div :class="{ box: true, box1: log1 > 24 }">
      <div class="labe2">
        <span
          :class="{ r: true, res2: res2 == 1, res3: res3 == 5 }"
          @click="(res2 = 1), ((show1 = true), (show2 = false))"
          >{{ itme1 }} ▼</span
        >
        <span
          :class="{ r: true, res2: res2 == 2, res4: res4 == 5 }"
          @click="(res2 = 2), ((show2 = true), (show1 = false))"
          >{{ itme2 }}<s v-show="biao == 1">↑</s
          ><s v-show="biao == 2">↓</s> ▼</span
        >
        <span :class="{ res2: res2 == 3 }" @click="res2 = 3">筛选 ▼</span>
      </div>

      <!-- 选择 -->
      <div class="region" v-show="show1">
        <p
          v-for="itme in list"
          :key="itme"
          :class="{ res2: itme1 == itme }"
          @click="(itme1 = itme), (show1 = show2 = false), (res3 = 5)"
        >
          {{ itme }}
        </p>
      </div>
      <!--  -->
      <div class="region" v-show="show2">
        <p
          v-for="(z, index) in list2"
          :key="index"
          @click="
            (itme2 = z.name),
              (biao = z.biao),
              (show2 = show1 = false),
              (res4 = 5)
          "
        >
          {{ z.itme }}
        </p>
      </div>
    </div>
    <div class="zan2" v-show="log1 > 24"></div>
    <!-- 图片 -->
    <div class="oul" @click="nxt">
      <ul>
        <li v-for="i in 5" :key="i">
          <div class="left">
            <img
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/psrdjnlwfb5lb9wkrgndmpftn1vvw91gssk1568863d-e000-4fa3-a944-5d9c0e79164b"
              alt=""
            />
          </div>
          <div class="right">
            <p class="wen">爱次方婚礼</p>
            <p class="wen2">金水区</p>
            <p class="wen3" v-show="1 == 2">
              <span>婚纱&nbsp;&nbsp;礼服&nbsp;&nbsp;化妆</span>
            </p>
            <div class="imgs">
              <div v-for="z in 2" :key="z">
                <img
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/pslfwy45igwatetpxwzt350g1xou90wjmd9b6c6717-77ef-4f65-9a81-ee5ea1e9fe55"
                  alt=""
                />套系¥16999
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      res: 1,
      res2: 4,
      res3: 0,
      res4: 0,
      list: ["全部地区", "郑州", "上海", "苏州", "青岛"],
      biao: 0,
      log1: "",
      list2: [
        {
          name: "排序",
          itme: "默认排序",
          biao: 0,
        },
        {
          name: "价格",
          itme: "价格从低到高",
          biao: 1,
        },
        {
          name: "价格",
          itme: "价格从高到低",
          biao: 2,
        },
        {
          name: "销量",
          itme: "销量从低到高",
          biao: 1,
        },
        {
          name: "销量",
          itme: "销量从高到低",
          biao: 1,
        },
        {
          name: "距离",
          itme: "距离从近到远",
          biao: 0,
        },
      ],
      show1: false,
      show2: false,
      itme1: "全部地区",
      itme2: "排序",
    };
  },
  created() {
    this.brr();
  },
  methods: {
    nxt() {
      setTimeout(() => {
        this.show1 = this.show2 = false;
      }, 200);
    },
    brr() {
      window.addEventListener("scroll", () => {
        let scrollTop =
          document.body.scrollTop || document.documentElement.scrollTop; //获取当前滚动条距离顶部的距离
        this.log1 = scrollTop;
        console.log(this.log1);
      });
    },
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

.top {
  font-size: 0.16rem;
  width: 7.51rem;
  height: 1.46rem;
  padding-bottom: 0.3rem;
  background-color: rgb(216, 65, 65);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: fixed;
  top: 0;
  z-index: 3;
}
.zan {
  width: 7.51em;
  height: 1.76rem;
}
.fanhui {
  margin-left: 0.2rem;
  width: 0.2rem;
  height: 0.32rem;
}
.sou {
  width: 0.28rem;
  height: 0.27rem;
  margin-right: 0.2rem;
}
.labe {
  /* position: fixed; */
  position: relative;
  /* top: 1.76rem; */
  width: 7.51rem;
  height: 0.47rem;
  background-color: #fff;
}
.box {
  border-bottom: 0.01rem solid #e3e3e3;
  border-top: 0.01rem solid #e3e3e3;
  width: 100%;
  height: 0.47rem;
  background-color: #fff;
  /* position: fixed;
  top: 1.76rem; */
  position: relative;
  z-index: 3;
}
.box1 {
  position: fixed;
  top: 1.76rem;
}
.region {
  z-index: 3;
  position: absolute;
  top: 0.47rem;
  width: 100%;
  background-color: aqua;
  color: rgba(102, 102, 102, 1);
  font-size: 0.22rem;
}
.region p {
  padding-left: 0.82rem;
  height: 0.45rem;
  line-height: 0.45rem;
  border-bottom: 0.01rem solid rgba(102, 102, 102, 1);
}
.zan2 {
  width: 7.51rem;
  height: 0.47rem;
  border-bottom: 0.01rem solid #e3e3e3;
}
.di {
  color: rgb(216, 65, 65);
  border-bottom: 0.01rem solid rgb(216, 65, 65);
}
.hui {
  color: #102, 102, 102;
}
.bai {
  color: #fff;
}
.labe3 {
  display: flex;
  justify-content: space-around;
  font-size: 0.16rem;
  width: 7.51rem;
  height: 0.16rem;
}
.labe3 span {
  display: inline-block;
  width: 0.49rem;
  height: 0.31rem;
}
.labe1 {
  display: flex;
  justify-content: space-around;
  font-size: 0.16rem;
  width: 7.51rem;
  height: 0.16rem;
}
.labe1 span {
  display: inline-block;
  width: 0.49rem;
  height: 0.31rem;
}
.labe2 {
  position: absolute;
  bottom: 0.1rem;
  display: flex;
  justify-content: space-around;
  font-size: 0.16rem;
  width: 7.51rem;
  height: 0.16rem;
  height: 0.34rem;
  font-size: 0.21rem;
}
s {
  margin-left: 0.05rem;
}
.labe2 span {
  width: 2.64rem;
  height: 0.34rem;
  text-align: center;
}
.r {
  border-right: 0.01rem solid #e3e3e3;
}
.res2 {
  color: #d84141;
}
.res3 {
  color: #d84141;
}
.res4 {
  color: #d84141;
}
.oul {
  width: 100%;
  margin: 0 auto;
  /* background-color: aqua; */
}
.oul li {
  list-style: none;
  padding: 0.36rem 0.36rem 0.2rem 0.69rem;
  border-bottom: 0.01rem solid #e3e3e3;
  display: flex;
}
.left {
  border: 0.01rem dashed #e3e3e3;
  width: 1.8rem;
  height: 1.8rem;
}
.right {
  padding-left: 0.37rem;
}
.left img {
  width: 1.8rem;
  height: 1.8rem;
}
.wen {
  color: rgba(51, 51, 51, 1);
  font-size: 0.28rem;
  margin-bottom: 0.35rem;
}
.wen2 {
  color: rgba(153, 153, 153, 1);
  font-size: 0.22rem;
}
.wen3 {
  color: rgba(153, 153, 153, 1);
  font-size: 0.22rem;
  margin-top: 0.44rem;
}
.imgs {
  display: flex;
  justify-content: space-between;
  margin-top: 0.15rem;
  width: 4.27rem;
  height: 1.54rem;
  color: rgba(216, 65, 65, 1);
  font-size: 0.22rem;
  text-align: center;
}
.imgs img {
  width: 1.96rem;
  height: 1.28rem;
}
</style>
